<template>
  <div>
    <div class="nav">
      <img class="exitImg" src="@/assets/icons/png/exit.png" @click="exit"/>
      <div class="title">消息</div>
      <!--   空白块 为了实现居中效果   -->
      <div style="width: 45px"></div>
    </div>
    <div class="content">
      <div class="message-item" v-for="item of messageList" :key="item.sort" @click="getMessage(item)">
        <div class="avatar-container">
          <img class="avatar" :src="avatar"/>
        </div>
        <div class="detail-container">
          <div class="item-name">{{ item.messageTitle }}</div>
          <div class="item-remark">{{ item.messageContent }}</div>
        </div>
        <div class="time-container">
          <el-badge v-if="item.isRead>0" :value="item.isRead" :max="99" class="item">
          </el-badge>
          <div v-else class="time">{{ item.messageUpdateTime }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";
import messageApi from "@/api/messageApi";

export default {
  data() {
    return {
      userId: window.localStorage.getItem("userId"),
      messageList: [],
      avatar: require("@/assets/icons/png/avatar.png"),
    }
  },
  created() {
    this.getMessageList();
  },
  methods: {
    getMessageList() {
      let param = {
        userId: this.userId
      }
      messageApi.queryMessageList(param).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          for (let i = 0; i < data.length; i++) {
            if (data[i].messageUpdateTime != "") {
              let date1 = data[i].messageUpdateTime.substring(0, 10);
              data[i].messageUpdateTime = date1;
            }
          }
          this.messageList = data;
          console.log(this.messageList)
        }
      })
    },
    getMessage(item) {
      const param = {
        userId: window.localStorage.getItem("userId"),
        messageType: item.messageType
      }
      messageApi.readMessageType(param)
      router.push({
        name: 'messageDetail',
        params: {messageType: item.messageType}
      });

    },
    exit() {
      router.push({
        name: 'index',
        params: {itemView: '2'}
      });
    }
  }

}

</script>

<style scoped>
.nav {
  width: 100%;
  height: 80px;
  background-color: rgb(251, 219, 68);
  display: flex; /* 使用flex布局使子元素水平排列 */
  align-items: center; /* 垂直居中对齐子元素 */
  justify-content: flex-start; /* 水平居左对齐子元素 */
}

.exitImg {
  width: 25px;
  height: 25px;
  margin-left: 20px;
}

.title {
  margin: auto;
  font-size: 20px; /* 增加标题字体大小 */
  font-weight: bold; /* 增加标题字体粗细 */
}

.message-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 10px;
  border-bottom: 1px solid #b2afaf;
}

.avatar-container {
  flex: 0 0 auto;
  margin-right: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 10px;
}

.detail-container {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
}

.item-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left;
}

.item-remark {
  font-size: 14px;
  color: #666;
  text-align: left;
  width: 90%;
}

.time-container {
  flex: 0 0 auto;
  text-align: right;
  margin-right: 15px;
  margin-left: 15px;
}

.time {
  font-size: 12px;
  color: #999;
}
</style>